<template>
	<view class="container">
		<image src="../../static/myimg/bgc.png" style="width: 100%; height: 400rpx; position: absolute; z-index: -1">
		</image>
		<!-- 自定义导航栏 -->
		<!-- position: fixed; -->
		<view style="
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        width: 100%;
        box-sizing: border-box;
       
        top: 0;
        left: 0;
        padding-left: 30rpx;
        background-color: transparent;
        z-index: 99;
      " :style="{ height: navheight + 'px', 'padding-top': hometop + 'px' }">
			<view style="font-weight: bold; font-size: 36rpx; color: #151515; margin-left: 170rpx">趣玩搭</view>
			<view></view>
		</view>
		<!-- 站位盒子 -->
		<view :style="{ height: navheight + 'px', width: '100%' }"></view>
		<!-- 主体 -->
		<view class="body" style="padding: 30rpx">
			<!-- 昵称和头像 -->
			<view style="width: 100%; display: flex; justify-content: space-between" @click="upload('昵称')">
				<view>
					<image
						:src="isShow ? `https://wndz.dev.jiangkukeji.cn/${userInfor.avatar}` : '../../static/logo.png'"
						style="width: 132rpx; height: 132rpx; border-radius: 66rpx; vertical-align: top"
						mode="aspectFill"></image>
					<view style="display: inline-block; height: 132rpx; margin-left: 20rpx">
						<view v-if="isShow"
							style="height: ; display: flex; flex-direction: column; justify-content: space-around">
							<text style="font-size: 36rpx">{{ userInfor.nickname }}</text>
							<text style="color: #666666">{{ userInfor.username }}</text>
						</view>
						<view v-else style="font-size: 40rpx; font-weight: blod; line-height: 132rpx">请先登录!</view>
					</view>
				</view>

				<view style="height: 132rpx; line-height: 132rpx">
					<image src="@/static/myimg/a6.png" style="width: 30rpx; height: 30rpx"></image>
				</view>
			</view>
			<!-- 列表 -->
			<view style="margin-top: 100rpx">
				<view
					style="width: 100%; display: flex; justify-content: space-between; border-bottom: 1rpx solid #e8e8e8"
					v-for="(item, index) in list" :key="item.title" @click="upload(item.title)">
					<view style="height: 132rpx; line-height: 132rpx; position: relative">
						<image :src="item.picture"
							style="width: 40rpx; height: 40rpx; position: absolute; left: 0; top: 35%"></image>
						<text style="font-size: 32rpx; margin-left: 60rpx">{{ item.title }}</text>
					</view>
					<view style="height: 132rpx; line-height: 132rpx">
						<image src="../../static/myimg/a6.png" style="width: 30rpx; height: 30rpx"></image>
					</view>
				</view>
			</view>
		</view>

		<!--站位盒子 -->
		<view style="height: 156rpx"></view>
		<!-- d底部组件 -->
		<TabBar @choosetab="choosetab" :tabbarindex="tabbarindex"></TabBar>
		<push v-if="showpush" @closeshowpush="closepush" @gopush="gopush"></push>
	</view>
</template>

<script>
	import {
		infor
	} from '@/utils/my.js';
	import push from '@/components/pushact.vue';
	import TabBar from '@/components/tabbar.vue';
	export default {
		components: {
			TabBar,
			push
		},
		data() {
			return {
				isShow: false,
				tabbarindex: 4,
				showpush: false,
				list: [{
						title: '邀请好友',
						picture: '../../static/myimg/a1.png'
					},
					{
						title: '我的发布',
						picture: '../../static/myimg/a2.png'
					},
					{
						title: '我的参与',
						picture: '../../static/myimg/a3.png'
					},
					{
						title: '动态',
						picture: '../../static/myimg/a4.png'
					},
					{
						title: '设置',
						picture: '../../static/myimg/a5.png'
					}
				],
				hometop: '',
				navheight: '',
				userInfor: {}
			};
		},
		onReachBottom() {
			console.log('触底了');
		},

		onLoad() {
			const app = getApp();
			this.hometop = app.globalData.capsule.top; // 胶囊到顶部的距离
			this.navheight = (app.globalData.capsule.top - app.globalData.system.statusBarHeight) * 2 + app.globalData
				.capsule.height + app.globalData.system.statusBarHeight; // 头部盒子的高度
		},
		async onShow() {
			this.isShow = !!uni.getStorageSync('token');
			if (uni.getStorageSync('token')) {
				const res = await infor();
				console.log(res);
				this.$nextTick(() => {
					this.userInfor = res.data;
				});
			}
		},
		methods: {
			//发布动态
			gopush(index) {
				if (index == 1) {
					this.showpush = false;
					// 发布活动
					uni.navigateTo({
						url: '/pages/pushactive/pushactive'
					});
				}
				if (index == 2) {
					this.showpush = false;
					// 发布动态
					uni.navigateTo({
						url: '/pages/pushdynamic/pushdynamic'
					});
				}
			},
			closepush(status) {
				this.showpush = status;
			},
			// 循环
			upload(text) {
				console.log(text);
				if (text == '昵称') {
					uni.navigateTo({
						url: '/my/selfData/selfData'
					});
				} else if (text == '邀请好友') {
					console.log('跳转了');
					uni.navigateTo({
						url: '/my/inviteFriends/inviteFriends'
					});
				} else if (text == '我的发布') {
					uni.navigateTo({
						url: '/my/selfRelease/selfRelease'
					});
				} else if (text == '我的参与') {
					uni.navigateTo({
						url: '/my/selfJoin/selfJoin'
					});
				} else if (text == '动态') {
					uni.navigateTo({
						url: '/my/userhome/userhome'
					});
				} else if (text == '设置') {
					uni.navigateTo({
						url: '/my/set/set'
					});
				}
			},
			// 切换tab
			choosetab(index) {
				if (index != 5) {
					this.tabbarindex = index;
				}

				console.log(index);
				if (index == 1) {
					uni.redirectTo({
						url: '/pages/index/index'
					});
				}
				if (index == 2) {
					uni.redirectTo({
						url: '/dynamic/index/index'
					});
				}
				if (index == 3) {
					uni.redirectTo({
						url: '/message/index/index'
					});
				}
				if (index == 4) {
					uni.redirectTo({
						url: '/my/index/index'
					});
				}
				if (index == 5) {
					this.showpush = true;
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	.container {
		font-size: 14px;
		line-height: 24px;
	}
</style>